<!--  -->
<template>
  <div class="save-folder">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @closed="close" :close-on-click-modal="false">
      <el-form :model="formInfo" v-loading="loading" ref="refForm" label-width="85px">
        <el-form-item label="备份规则：">
          <el-radio v-model="formInfo.type" size="small" :label="0">不启用</el-radio>
          <el-radio v-model="formInfo.type" size="small" :label="2">每周</el-radio>
          <el-radio v-model="formInfo.type" size="small" :label="1">每月</el-radio>
          <el-radio v-model="formInfo.type" size="small" :label="3">自定义</el-radio>
        </el-form-item>
        <div v-if="formInfo.type > 0">
          <el-form-item label="开始时间：">
              <el-date-picker v-model="formInfo.startAt" type="date" placeholder="选择日期" size="medium" :picker-options="pickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          <div v-if="formInfo.type === 2">
            <el-form-item label="备份时间：">
              <el-select v-model="formInfo.weekly" placeholder="请选择" size="medium" style="width:200px;">
                <el-option label="每周一" :value="1"></el-option>
                <el-option label="每周二" :value="2"></el-option>
                <el-option label="每周三" :value="3"></el-option>
                <el-option label="每周四" :value="4"></el-option>
                <el-option label="每周五" :value="5"></el-option>
                <el-option label="每周六" :value="6"></el-option>
                <el-option label="每周日" :value="7"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="formInfo.type === 1">
            <el-form-item label="备份时间：">
              每月 <el-select v-model="formInfo.monthly" placeholder="请选择" size="medium" style="width:120px;">
                <el-option v-for="item in 28" :key="item" :label="item" :value="item">
                </el-option>
              </el-select> 日<span class="gray">（最大28日）</span>
            </el-form-item>
          </div>
          <div v-if="formInfo.type === 3">
            <el-form-item label="备份周期：">
              每 <el-input type="number"  min="1" max="180" v-model.trim="formInfo.daily" autocomplete="off" style="width: 120px;" placeholder="" size="medium" class="changHgh" @blur="dailyblur">
            </el-input> 天备份<span class="gray">（最大180）</span>
            </el-form-item>
          </div>
          <div class="red">规则生效后，下次备份将在：{{updateDate}}进行</div>
          <el-form-item label="备份保留：">
            最近 <el-input type="number"  min="1" max="50" v-model.trim="formInfo.retain" autocomplete="off" style="width: 120px;" placeholder="" size="medium" @blur="retainblur" class="changHgh">
            </el-input> 份
          </el-form-item>
          <div class="red">超出备份数量将自动删除最早备份，不超过50</div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">保存规则</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    resetBackup: {
      type: Function
    }
  },
  data () {
    return {
      title: '备份规则设置',
      loading: false,
      dialogVisible: false,
      formInfo: {
      },
      pickerOptions: this.handelDate(),
      updateDate: ''
    }
  },
  watch: {
    formInfo: {
      handler (newValue, oldValue) {
        if ((newValue.type !== 3 || (newValue.type === 3 && parseInt(newValue.daily) > 0 && parseInt(newValue.daily) < 181)) && parseInt(newValue.retain) > 0 && parseInt(newValue.retain) < 51 && newValue.startAt) {
          this.$jpost('/host-backup-restore/next-backup-date-by-param', newValue).then(response => {
            if (response) {
              this.updateDate = response
            }
          })
        }
      },
      deep: true
    }
  },
  methods: {
    dailyblur () {
      if (!this.formInfo.daily || parseInt(this.formInfo.daily) > 180 || parseInt(this.formInfo.daily) < 1) {
        this.formInfo.daily = 30
      }
    },
    retainblur () {
      if (!this.formInfo.retain || parseInt(this.formInfo.retain) > 50 || parseInt(this.formInfo.retain) < 1) {
        this.formInfo.retain = 3
      }
    },
    handelDate () {
      return {
        disabledDate (time) {
          return time.getTime() < Date.now() // 只能选明天之前的日期
        }
      }
    },
    create () {
      this.dialogVisible = true
      this.$post('/host-backup-restore/backup-setup').then(response => {
        if (response) {
          this.formInfo = response
        }
      })
    },
    close () {
      this.formInfo = {}
      this.dialogVisible = false
      this.loading = false
    },
    save () {
      if (this.loading) {
        return
      }
      if (!this.formInfo.daily || parseInt(this.formInfo.daily) < 1 || parseInt(this.formInfo.daily) > 180) {
        this.formInfo.daily = 30
      }
      if (!this.formInfo.retain || parseInt(this.formInfo.retain) < 1 || parseInt(this.formInfo.retain) > 50) {
        this.formInfo.retain = 3
      }
      this.$jpost('/host-backup-restore/update-backup-setup', this.formInfo).then(response => {
        if (response) {
          let isopen = parseInt(response.type) > 0
          this.resetBackup(isopen, response.retain)
          this.close()
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.save-folder /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-folder /deep/ .el-form-item {
  margin-bottom: 10px;
}
.red{
  color:#ec0000;
  margin-top: -5px;
  margin-bottom: 5px;
  margin-left: 2px;
}
.gray{
  color:#999;
  font-size: 12px;
  margin-left:10px;
}
.changHgh /deep/ .el-input__inner {
  line-height: 1.3;
  padding-top: 4px;
  padding-bottom: 4px;
}
</style>
